<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>选课</title>
    <link rel="stylesheet" type="text/css" href="/wechat/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/wechat/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/wechat/css/style.css"/>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<div class="fade1"></div>
<div class="select">
    <form action="" class="layui-form">
        <div class="layui-form-item layui-form-item1">
            <label class="layui-form-label">适合月龄段</label>
            <div class="layui-input-block">
                <select name="id" lay-verify="required" id="select_month_age">
                    @foreach($month_ages as $ma)
                        <option value="{{ $ma->id  }}"
                                @if($current_selecte_monght_age_id == $ma->id)selected @endif> {{ $ma->title  }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </form>
    <p class="expain">“1个宝宝可以选择活动3次”</p>

    <div class="yuyue">
        <form action="">
            @foreach($course_times->chunk(3) as $courses_times_chunked)
            <ul class="clearfix">
                @foreach($courses_times_chunked as $course_time)
                    <li class="li">
                        <ul>
                            <li> {{ $course_time->course_time->toDateString()  }}</li>
                            <li class="lis"><p>{{ $course_time->course->name }}@if(mb_strlen($course_time->course->name)<8)</p><p>@else &nbsp; @endif{{ $course_time->course_time->format('H:i') }}</p></li>
                            <li class="yy">
                                <input type="button" name="" id=""
                                       @if (empty($baby_month_age) || $current_selecte_monght_age_id !== $baby_month_age->id || in_array($course_time->id, $subs) || $baby_state != 1 || $course_time->people_number >= $course_time->max_sub || $course_time->course_time < date('Y-m-d H:i:s', time())) disabled="disabled" @endif
                                       class="layui-btn sub_course"
                                       value="@if($baby_state != 1) 待审核 @elseif(in_array($course_time->id, $subs)) 已预约  @elseif( $course_time->people_number >= $course_time->max_sub ) 已约满 @elseif($course_time->course_time < date('Y-m-d H:i:s', time()))  已过期 @else 预约 @endif"
                                       course_time_id="{{ $course_time->id }}"/>
                            </li>
                        </ul>
                    </li>
                @endforeach
            </ul>
            @endforeach
        </form>
    </div>

    <div>
        {{--<p class="ck"><a href="{{ URL::to('wx/courses_intro')  }}?id={{$current_selecte_monght_age_id}}">查看课程详情</a></p>--}}
    </div>
</div>
<!--<div class="foot"></div>-->
<!--确定预约提示层-->
<div id="yySuccess">
    <img src="/wechat/img/gt.png"/>
    <p class="xx">是否预约该课程</p>
    <p class="pp">预约后就不能取消</p>
    <ul class="clearfix qx">
        <li class="qxx">取消</li>
        <li class="qwd" id="yes_submit">确定</li>
    </ul>
</div>

<!--预约失败提示层-->
<div id="yyError" style>
    <img src="/wechat/img/gt.png"/>
    <p class="xx">失败了</p>
    <p class="pp" id="yyErrorMsg"></p>
</div>

<div class="bb"></div>
<!--预约成功提示层-->
<div id="yuyueSucess">
    <div class="cg">
        <img src="/wechat/img/su.png"/><span>预约成功</span>
    </div>
    <ul class="lie" id="subscribe_msg">
        <li><span>家长姓名：</span>程七七</li>
        <li><span>宝宝姓名：</span>李潇潇</li>
        <li><span>宝宝出生日期：</span>2017年8月24日</li>
        <li><span>课程主题：</span>创意A</li>
        <li><span>预约时间：</span>9月18日&nbsp;周三&nbsp; 09:00</li>
        <li><span>适合月龄段：</span>2017年1-6月出生的宝宝</li>
    </ul>
</div>
<div class="cc"></div>
</body>
<script src="/wechat/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/LArea.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/LAreaData1.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/LAreaData2.js" type="text/javascript" charset="utf-8"></script>
<!--城市选择插件-->
<script src="/wechat/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).on('mousedown', '.layui-anim dd', function () {
            var value = $(this).attr('lay-value');
            if (value != {{ $current_selecte_monght_age_id }}) {
                window.location.href = "/wx/courses?id=" + value;
            }
        });
        
        $('.sub_course').on('click', function () {
            window.selected_course_time_id = $(this).attr('course_time_id');
            window.selected_course_input = this;
            layer.open({
                type: 1,
                title: '',
                closeBtn: 0,
                shadeClose: true,
                area: ['4.8rem', 'auto'],
                content: $('#yySuccess'),
                isOutAnim: true
            })
        });
        $('#yes_submit').on('click', function () {
            var data = {};
            data.course_time_id = window.selected_course_time_id;
            $.ajax({
                method: 'post',
                url: '/wx/sub',
                data: data,
                dataType: 'json',
                success: function (data) {
                    $('.layui-layer-shade').trigger('click');
                    if (data.result === true) {
                        // alert(JSON.stringify(data));
                        ///return 0;
                        $(window.selected_course_input).val('已预约').attr('disabled', 'disabled');
                        $ul = $('#subscribe_msg');
                        var li = $ul.find('li');
                        $(li[0]).html('<span>家长姓名：</span>' +data.guardian);
                        $(li[1]).html('<span>宝宝姓名：</span>' +data.baby_name);
                        $(li[2]).html('<span>宝宝出生日期：</span>' +data.baby_birth);
                        $(li[3]).html('<span>课程主题：</span>' +data.course_title);
                        $(li[4]).html('<span>预约时间：</span>' +data.course_time);
                        $(li[5]).html('<span>适合月龄段：</span>' +data.month_age);

                        layer.open({
                            type: 1,
                            title: '',
                            shadeClose: true,
                            area: ['4.8rem', 'auto'],
                            content: $('#yuyueSucess'),
                            isOutAnim: true
                        })
                    } else { // error 预约失败
                        $('#yyErrorMsg').html(data.msg);
                        layer.open({
                            type: 1,
                            title: '',
                            shadeClose: true,
                            area: ['4.8rem', 'auto'],
                            content: $('#yyError'),
                            isOutAnim: true
                        })
                    }
                }
            })
        });
    });

</script>
</html>
